<template>
  <div class="reg">
    <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
    <div class="form-box">
      <van-form @submit="setReg">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            placeholder="用户名"
            :rules="[
              { required: true, message: '请填写用户名' },
              {
                pattern: /[A-Za-z1-9\u4e00-\u9fa5]{1,10}/,
                message: '支持中英文数字组合',
              },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern: /^[A-Za-z]\w{5,15}$/,
                message: '支持数字字母下划线组合且须以字母开头',
              },
            ]"
          />
        </van-cell-group>
        <div class="btn-box">
          <button class="btn">注册</button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";

export default defineComponent({
  name: "Reg",
  setup() {
    let router: any = useRouter();
    // 返回上一页
    const onClickLeft = () => history.back();
    // 表单信息
    const username = ref("");
    const password = ref("");
    //注册信息
    let setReg: () => void = (): void => {
      let user: any = {
        name: username.value,
        password: password.value,
      };
      let userData: any = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      let isHasUser: boolean = false;
      for (let i: number = 0; i < userData.length; i++) {
        if (userData[i].name == user.name) {
          showToast("当前手机号存在");
          isHasUser = true;
        }
        break;
      }
      if (!isHasUser) {
        showToast("注册成功,即将跳转到登录页面...");
        userData.push({ ...user });
        localStorage.setItem("user", JSON.stringify(userData));
        setTimeout(() => {
          router.push({
            name: "Login",
          });
        }, 3000);
      }
    };
    return {
      username,
      password,
      // 方法
      onClickLeft,
      setReg,
    };
  },
});
</script>
<style lang="scss" scoped>
.auto-img {
  display: block;
  width: 100%;
}
.code {
  display: flex;
  align-items: center;
  .code-img {
    width: 80px;
    height: 40px;
    margin-right: 4px;
  }
  .code-text {
    span {
      display: block;
      font-size: 12px;
    }
    .text-btn {
      color: #3190e8;
    }
  }
}
.form-box {
  margin-top: 20px;
  height: 677px;
  background-color: #eee;
  padding: 10px 0;
  box-sizing: border-box;
}

::v-deep .van-nav-bar__content {
  background-color: #3190e8;
}

::v-deep .van-nav-bar__title {
  color: #ffffff;
  font-size: 20px;
}

::v-deep .van-nav-bar .van-icon {
  color: #ffffff;
  font-size: 22px;
}

::v-deep .van-hairline--bottom::after {
  border-bottom-width: 0;
}
::v-deep .van-nav-bar__text {
  color: #ffffff;
  font-size: 16px;
}
.btn-box {
  margin: 20px 80px;
  .btn {
    width: 200px;
    height: 40px;
    font-size: 16px;
    color: #ffffff;
    background-color: #3190e8;
    border: 0;
  }
}
</style>